<template>
  <div id="PickingByOrder_new">
    <root name="PickingByOrder_new">
      <SafeHeader
        v-bind="{
          title: '按单拣货',
          isBack: true,
          fixedTop: true,
        }"
      >
      </SafeHeader>
      <v-tabs fixed-tabs height="40" v-model="tab">
        <v-tab class="wms-tab"> 任务</v-tab>
        <v-tab class="wms-tab"> 拣货</v-tab>
        <!-- 任务页面 -->
        <v-tab-item class="task" transition="slide-y-transition">
          <v-container>
            <v-card outlined class="py-2 mt-2">
              <v-row class="ma-0 mb-4">
                <v-col class="py-1">
                  <v-text-field
                    autofocus
                    clearable
                    filled
                    :prepend-inner-icon="mdiCreditCardScan"
                    class="my-0 inputPlaceholder"
                    @keydown.13="taskCodeSearch"
                    dense
                    hide-details
                    v-model="outBillForm.billNo"
                    placeholder="请扫描出库任务号"
                  ></v-text-field>
                </v-col>
              </v-row>
              <v-row class="ma-0 mb-4">
                <v-col class="py-0">
                  <v-text-field
                    label="计划日期"
                    dense
                    readonly
                    v-model="outBillForm.createTime"
                    hide-details
                  ></v-text-field>
                </v-col>
              </v-row>
              <v-row class="ma-0 mb-4">
                <v-col class="py-0">
                  <v-select
                    :items="soBillTypeList"
                    placeholder="选择任务类型"
                    item-text="dictValue"
                    item-value="dictKey"
                    v-model="soType"
                    @change="getSelected(soType)"
                  ></v-select>
                </v-col>
                <v-col class="py-0">
                  <v-btn
                    class="wms-submit-btn"
                    block
                    style="
                      background-color: #ffffff;
                      height: 50px;
                      border-radius: 10px;
                    "
                    @click="sourceOrderQuery"
                    v-show="hidshow"
                    >源单查询
                  </v-btn>
                </v-col>
              </v-row>
            </v-card>
          </v-container>

          <v-container class="task_list white">
            <v-row>
              <v-col
                cols="12"
                class="card-title"
                style="padding-bottom: 8px; padding-top: 8px"
                >任务明细列表
              </v-col>
            </v-row>
            <v-divider class="mb-2"></v-divider>
            <div v-if="outBillForm.details[0]">
              <v-container
                v-for="(item, index) in outBillForm.details"
                :key="index"
              >
                <v-row>
                  <v-col cols="12" class="pa-0 pb-2">
                    <v-card outlined style="background-color: #f2f3f5">
                      <v-card-subtitle class="list_content">
                        <v-row
                          class="
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >物料编码
                          </v-col>
                          <v-col class="py-1 card-value"
                            >{{ item.itemCode }}
                          </v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >物料名称
                          </v-col>
                          <v-col class="py-1 card-value"
                            >{{ item.itemName }}
                          </v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >计划数量
                          </v-col>
                          <v-col class="py-1 card-value"
                            >{{ item.orderQuantity }}
                          </v-col>
                        </v-row>
                        <v-divider class="mt-1 mb-2"></v-divider>
                        <v-row
                          class="
                            d-flex
                            flex-row
                            justify-space-between
                            align-center
                            pt-1
                          "
                        >
                          <v-col
                            cols="4"
                            class="py-1 card-lable"
                            style="color: #323333"
                            >已拣数量
                          </v-col>
                          <v-col class="py-1 card-value" style="color: #ffc352">
                            {{ item.pickQuantity ? item.pickQuantity : 0 }}
                          </v-col>
                          <!-- <v-col cols="3" class="d-flex justify-end py-1">
                            <v-btn
                              rounded
                              small
                              color="#193690"
                              dark
                              @click="picking(item)"
                              >拣货</v-btn
                            >
                          </v-col> -->
                        </v-row>
                      </v-card-subtitle>
                    </v-card>
                  </v-col>
                </v-row>
              </v-container>
            </div>

            <v-row v-else>
              <v-col cols="12" class="text-center">暂无数据</v-col>
            </v-row>
          </v-container>
          <div v-show="hidshow" class="footer">
            <v-bottom-navigation
              grow
              style="background: transparent; box-shadow: none"
              class="navigationBtns"
            >
              <v-row
                class="pa-0 ma-0 justify-center"
                style="background: transparent"
              >
                <v-col
                  cols="12"
                  class="pa-0 ma-0 d-flex justify-center align-center mb-2 px-2"
                  style="background: transparent"
                >
                  <v-btn
                    class="wms-submit-btn"
                    block
                    style="
                      background-color: #193690;
                      height: 100%;
                      border-radius: 10px;
                    "
                    @click="picking"
                    >拣货
                  </v-btn>
                </v-col>
              </v-row>
            </v-bottom-navigation>
          </div>
        </v-tab-item>
        <!-- 拣货页面 -->
        <v-tab-item transition="slide-y-transition" class="pickingWrap">
          <v-container class="mt-2 pa-0">
            <v-card class="pickingCard" height="250">
              <!--<v-row class="ma-0 pa-3" style="height: 38px">
                <v-col cols="12" class="d-flex justify-space-between">
                  <div
                    class="d-flex justify-space-between align-center"
                    style="width: 100%"
                  >
                     <div class="pickingCard_title">
                      {{ currentSoDetailItem.itemName }}
                    </div> -->
              <!-- <div class="pickingCard_title">
                待拣数量：{{ currentSoDetailItem.currentUnPickQty }}
              </div>
              <span>拣货任务</span>
            </div>
          </v-col>
        </v-row>
        <v-divider></v-divider>-->
              <!-- <v-row class="ma-0 pa-0">
                <v-col cols="12"> -->
              <v-data-table
                height="250"
                dense
                disable-filtering
                sort-by="state"
                :headers="recommendheaders"
                :items="recommendList"
                @click:row="clickPickTask"
                mobile-breakpoint="1024"
                class="boxCodeDialog_card_table"
                hide-default-footer
              >
                <template v-slot:[`item.state`]="{ item }">
                  <v-simple-checkbox
                    v-model="item.check"
                    disabled
                  ></v-simple-checkbox>
                </template>

                <!-- <template v-slot:[`item.state`]="{ item }">
                      <v-chip small class="ma-0" color="#627AEC" label dark>
                        {{ item.state == 2 ? "已拣" : "未拣" }}
                      </v-chip>
                    </template> -->
              </v-data-table>
              <!-- </v-col>
              </v-row> -->
            </v-card>
          </v-container>
          <v-container class="mt-3 py-1 px-0 pickingCard-bottom">
            <v-form v-model="pickingForm" ref="pickingForm" class="pickingForm">
              <v-row class="pa-1 pt-0">
                <v-col cols="12">
                  <v-text-field
                    id="id-srcBarcode"
                    clearable
                    autofocus
                    filled
                    :prepend-inner-icon="mdiCreditCardScan"
                    @keydown.13="handleEnterBarcode"
                    dense
                    hide-details
                    background-color="#F8F8FF"
                    v-model="pickForm.barcode"
                    placeholder="请扫描库位或追踪号"
                  ></v-text-field>
                </v-col>
                <!-- <v-col cols="12">
                  <v-text-field
                    id="id-srcCellCode"
                    clearable
                    autofocus
                    filled
                    :prepend-inner-icon="mdiCreditCardScan"
                    @keydown.13="handleEnterCellCode"
                    dense
                    hide-details
                    background-color="#F8F8FF"
                    v-model="pickForm.srcCellCode"
                    placeholder="请扫描库位"
                  ></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-text-field
                    id="srcItemInfo"
                    clearable
                    filled
                    :prepend-inner-icon="mdiCreditCardScan"
                    @keydown.13="handleEnterCtCode"
                    dense
                    hide-details
                    background-color="#F8F8FF"
                    v-model="pickForm.srcBoxCode"
                    placeholder="请扫描追踪号"
                  ></v-text-field>
                </v-col> -->
                <v-col cols="6 " class="pickingForm_view">
                  <v-text-field
                    label="物料编码"
                    hide-details
                    :disabled="true"
                    dense
                    v-model="pickForm.itemCode"
                  >
                  </v-text-field>
                </v-col>
                <v-col cols="6 " class="pickingForm_view">
                  <v-text-field
                    label="批次"
                    :disabled="true"
                    dense
                    small
                    hide-details
                    v-model="pickForm.batchName"
                  >
                  </v-text-field>
                </v-col>
                <v-col cols="6" class="pickingForm_view">
                  <v-text-field
                    label="计划数量"
                    dense
                    :disabled="true"
                    type="number"
                    hide-details
                    v-model="pickForm.pickQuantity"
                  >
                  </v-text-field>
                </v-col>
                <v-col cols="6" class="pickingForm_view">
                  <v-text-field
                    id="id-pickQty"
                    label="拣货数量"
                    dense
                    type="number"
                    hide-details
                    v-model="pickForm.actQuantity"
                    placeholder="请输入需要拣货的数量"
                  >
                  </v-text-field>
                </v-col>
                <v-col cols="6" class="pickingForm_view">
                  <v-text-field
                    label="库存总量"
                    dense
                    :disabled="true"
                    type="number"
                    hide-details
                    v-model="pickForm.allQuantity"
                  >
                  </v-text-field>
                </v-col>
                <v-col cols="6">
                  <v-text-field
                    label="替换追踪号"
                    :disabled="true"
                    dense
                    small
                    hide-details
                    v-model="pickForm.changeBoxCode"
                  ></v-text-field>
                </v-col>
              </v-row>
            </v-form>
          </v-container>
          <!-- <v-container
            style="font-size: 13px; color: #979899"
            class="py-1 mb-15"
          >
            提示：整箱拣货只需要扫描拣货容器；分箱拣货需要额外扫描目标容器及输入需要拣货的数量
          </v-container> -->
          <div v-show="hidshow" class="footer">
            <v-bottom-navigation
              height="60"
              style="background: transparent; box-shadow: none"
            >
              <v-row
                class="pa-0 ma-0 justify-center"
                style="background: transparent"
              >
                <v-col
                  cols="12"
                  class="
                    pa-0
                    ma-0
                    d-flex
                    justify-space-between
                    align-center
                    mb-2
                    px-2
                    py-1
                  "
                  style="background: transparent"
                >
                  <!-- <v-btn
                    class="wms-submit-btn btn-left"
                    color="#193690"
                    dark
                    outlined
                    style="
                      height: 100%;
                      border-radius: 10px;
                      width: 30%;
                      color: #193690 !important;
                    "
                    @click="pickingReturn"
                    >返回
                  </v-btn> -->
                  <v-btn
                    class="wms-submit-btn btn-left"
                    color="#193690"
                    dark
                    outlined
                    style="
                      height: 100%;
                      border-radius: 10px;
                      width: 30%;
                      color: #193690 !important;
                    "
                    @click="reTag"
                    >补打
                  </v-btn>
                  <v-btn
                    class="wms-submit-btn"
                    style="
                      background-color: #193690;
                      height: 100%;
                      border-radius: 10px;
                      width: 65%;
                    "
                    @click="pickingSubmit"
                    >提交
                  </v-btn>
                </v-col>
              </v-row>
            </v-bottom-navigation>
          </div>
        </v-tab-item>
      </v-tabs>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "@/components/safeHeader_wms.vue";
import wms from "@/utils/business_wms";
import _ from "lodash";
import { mdiCreditCardScan } from "@mdi/js";
import { printToJiaBo } from "@/static/print";

export default {
  name: "PickingByOrder_new",
  components: {
    Root,
    SafeHeader,
  },
  data() {
    return {
      mdiCreditCardScan: mdiCreditCardScan,

      // docmHeight: document.documentElement.clientHeight,
      // showHeight: document.documentElement.clientHeight,
      hidshow: true,
      overlay: false,
      tab: null,
      // tab1 出库任务表单
      outBillForm: {
        billId: "", //出库任务id
        billNo: "", // 出库任务号
        state: "", // 状态
        createTime: "", // 计划日期
        details: [], //出库任务明细列表
      },

      // 当前选中的SO明细
      currentSoDetailItem: {},
      soBillTypeList: [],
      // 拣货任务
      recommendList: [],

      // 推荐库位表头 库位 物料 批次 数量
      recommendheaders: [
        {
          text: "库位",
          value: "cellCode",
        },
        {
          text: "追踪号",
          value: "boxCode",
        },
        {
          text: "物料",
          value: "itemCode",
        },
        {
          text: "批次",
          value: "batchName",
        },
        {
          text: "待拣数量",
          value: "unpickQuantity",
        },

        // {
        //   text: "是否完成",
        //   value: "state",
        // },
      ],

      // 选择的容器多批次列表
      pickingForm: true,

      rules: {
        ctCodeRules: [(v) => !!v || "请扫描或输入拣货容器编码"],
        targetCtCodeRules: [(v) => !!v || "请扫描或输入目标容器编码"],
        prePickQtyRules: [(v) => !!v || "请输入需要拣货的数量"],
      },

      // 需要提交的数据
      pickForm: {
        pickTaskId: "", //拣货任务id
        pickQuantity: "", //拣货数量 理论推荐的数量
        barcode: "", //编码
        srcCellCode: "", //来源容器
        srcBoxCode: "",
        toBoxCode: "", //目标容器
        actQuantity: "", //实际输入的拣货数量  用于校验
        allQuantity: "", //库存总量
        isAllPick: true,
        diffMoreQty: "",
        diffLessQty: "",
        srcItemCode: "",
        itemCode: "",
        itemName: "",
        batchName: "",
        srcItemInfo: "",
        newBoxCode: "",
        changeBoxCode: "",
      },
      soType: localStorage.getItem("soType"),
      targetCtCodeDisabled: true,
      msgDialog: false, // 原因弹框
      msgData: "", // 原因详情

      invList: [],
    };
  },
  methods: {
    getColor(item) {
      if (item == 0) {
        return "red";
      } else {
        return "yellow";
      }
    },
    // 源单查询
    sourceOrderQuery() {
      // 进入出库单列表
      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.openWin({
          name: "DeliveryOrderList",
          url: "./DeliveryOrderList.html",
        });
      } else {
        this.$root.api.api.openWin({
          name: "DeliveryOrderList",
          url: "./DeliveryOrderList.html",
          pageParam: {
            soBilType: this.soType,
          },
        });
      }
    },
    // -----------------------任务页面 S -------------------
    /**
     * 根据任务号去查询
     */
    taskCodeSearch() {
      if (!this.outBillForm.billNo) {
        return false;
      }
      let params = {
        billNo: this.outBillForm.billNo,
      };
      this.overlay = true;
      wms
        .get({
          url: "/so/masters/findAndSuggest",
          data: params,
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            if (_.isEmpty(res.data.data)) {
              alert("未查询到对应的出库任务:" + this.outBillForm.billNo);
              this.overlay = false;
              return false;
            }
            let soData = res.data.data;
            this.outBillForm.createTime = soData.createTime;
            wms
              .get({
                url: "/so/details/list",
                data: params,
              })
              .then((res) => {
                if (res.status == 200 && res.data.code == 200) {
                  console.log(res);
                  let resData = res.data.data;
                  // console.log(JSON.stringify(resData));
                  this.outBillForm.details = resData;
                  this.overlay = false;
                } else {
                  alert(res.data.message);
                  this.overlay = false;
                }
              });
          } else {
            alert(res.data.message);
            this.overlay = false;
          }
        });
    },
    /**
     * 任务类型下拉框
     */
    getSelected(val) {
      this.soType = val;
      console.log(this.soType);
      // 将值存储在缓存中
      localStorage.setItem("soType", this.soType);
    },
    /**
     * 开始拣货 拣货按钮--查询该单号下的拣货任务
     */
    picking() {
      //判断是否有值
      if (!this.outBillForm.billNo) {
        return this.$root.api.api.toast({
          msg: "请先确定出库任务",
          location: "middle",
          duration: 3000,
        });
      }
      this.overlay = true;
      //Tab跳转
      this.tab = 1;
      // //待拣的物料详情
      // this.currentSoDetailItem = item;
      // // 待检数量
      // this.currentSoDetailItem.currentUnPickQty =
      //   this.currentSoDetailItem.allottedQuantity -
      //   this.currentSoDetailItem.pickQuantity;
      //获取拣货任务
      wms
        .get({
          url: "/pick/tasks/list",
          data: { billNo: this.outBillForm.billNo, pageSize: 1000, state: 0 },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            let cellCodes = [];

            let pickData = res.data.data.list;
            // 查询出来的数据如果是空的--表示拣货已经完成
            //拣货任务
            this.recommendList = pickData;
            // 记录一下有多少个拣货任务状态是已拣的
            let count = 0;
            // 设置选中状态--任务列表已经拣货完成会勾选上
            this.recommendList.forEach((item) => {
              //  {{ item.state == 2 ? "已拣" : "未拣" }}
              if (item.state == 2) {
                count++;
                item.check = true;
              } else {
                item.check = false;
              }
              item.unpickQuantity = item.pickQuantity - item.reviewQuantity;
              if (item.unpickQuantity > 0) {
                cellCodes.push(item.cellCode);
              }
            });
            console.log(count);
            let count2 = 0;
            let list2 = this.recommendList;
            //将拣货完成的任务放在最后
            for (let i = 0; i < list2.length; ++i) {
              let data;
              if (list2[i].state == 2) {
                //拣货完成的放在后面
                for (let j = 0; j < list2.length - 1; ++j) {
                  data = list2[j];
                  list2[j] = list2[j + 1];
                  list2[j + 1] = data;
                }
                //从头开始
                i = 0;
                count2++;
              }
              if (count2 == count) {
                break;
              }
            }
            console.log(count2);

            this.recommendList = list2;
            // 判断是否全部拣货完成--跳回主页面
            if (count == this.recommendList.length) {
              //全部拣货完成
              alert("所有拣货任务已完成!!!");
              this.taskCodeSearch();
              this.tab = 0;
            }

            let ledParams = {
              cellCodes: cellCodes,
              time: -1,
              lighttype: 1, //亮灯
            };
            wms
              .post({
                url: "/cellLed/operate",
                data: ledParams,
              })
              .then((res) => {
                if (res.status == 200 && res.data.code == 200) {
                }
              });

            document.getElementById("id-srcBarcode").focus();
            this.overlay = false;
          } else {
            document.getElementById("id-srcBarcode").focus();
            this.overlay = false;
          }
        });
    },
    // -----------------------任务页面 E -------------------

    // -----------------------拣货页面 S -------------------
    clickPickTask(item) {
      if (item.boxCode == this.pickForm.changeBoxCode) {
        if (confirm("确认取消对追踪号【" + item.boxCode + "】的变更?")) {
          this.pickForm.changeBoxCode = "";
          this.pickForm.pickQuantity = "";
          this.pickForm.pickTaskId = "";
        }
      } else {
        if (confirm("确认对追踪号【" + item.boxCode + "】不按原计划拣货?")) {
          //查询容器库存
          this.pickForm.changeBoxCode = item.boxCode;
          this.pickForm.pickQuantity = item.pickQuantity - item.reviewQuantity;
          this.pickForm.pickTaskId = item.pickTaskId;
          document.getElementById("id-srcBarcode").focus();
        }
      }
    },
    /**
     * 扫描追踪号或者库位，系统给与判断
     */
    handleEnterBarcode() {
      if (!this.pickForm.barcode || this.pickForm.barcode.length <= 2) {
        return false;
      }
      let startStr = this.pickForm.barcode.substring(0, 2);
      if (startStr == "TN") {
        //给追踪号赋值
        //调用追踪号的回车逻辑
        this.pickForm.srcBoxCode = this.pickForm.barcode;
        this.handleEnterCtCode();
      } else {
        this.pickForm.srcCellCode = this.pickForm.barcode;
        this.handleEnterCellCode();
      }
    },
    /**
     * 扫描物料标签
     */
    handleEnterCtCode() {
      //解析容器条码
      if (!this.pickForm.srcBoxCode) {
        return false;
      }
      if (!this.pickForm.changeBoxCode) {
        let params = {
          boxCode: this.pickForm.srcBoxCode,
          soMasterCode: this.outBillForm.billNo,
        };
        this.overlay = true;
        wms
          .post({
            url: "/pick/tasks/detail",
            data: params,
          })
          .then((res) => {
            this.overlay = false;
            if (res.status == 200 && res.data.code == 200) {
              //提交成功
              let flag = false;
              this.recommendList.forEach((item) => {
                if (item.boxCode == this.pickForm.srcBoxCode) {
                  flag = true;
                  // 表示扫描的库位和列表中对应上了
                  this.pickForm.pickTaskId = item.pickTaskId;
                  this.pickForm.itemCode = item.itemCode;
                  this.pickForm.itemName = item.itemName;
                  this.pickForm.batchName = item.batchName;
                  // 实际拣货数量
                  this.pickForm.actQuantity = item.invQuantity;
                  // 计划拣货数量
                  this.pickForm.pickQuantity =
                    item.pickQuantity - item.reviewQuantity;

                  this.getItemStock(item.itemCode);
                }
              });
              if (flag) {
                document.getElementById("id-pickQty").focus();
              } else {
                this.$root.api.api.toast({
                  msg: this.pickForm.srcBoxCode + "不存在拣货任务",
                  location: "middle",
                  duration: 5000,
                });
                this.pickForm.srcBoxCode = "";
                this.pickForm.barcode = "";
              }
            } else {
              this.overlay = false;
              alert(res.data.message);
            }
          });
      } else {
        this.overlay = true;
        wms
          .get({
            url: "/inventorys/list",
            data: { boxCode: this.pickForm.srcBoxCode },
          })
          .then((res) => {
            if (res.status == 200 && res.data.code == 200) {
              let invt = res.data.data.list;
              if (invt.length == 0) {
                this.overlay = false;
                return alert("未查询到相关库存");
              }
              // 库存数量为一条直接带出相关数据
              if (invt.length == 1) {
                // 表示扫描的库位和列表中对应上了
                this.getItemStock(invt[0].itemCode);
                this.pickForm.itemCode = invt[0].itemCode;
                this.pickForm.itemName = invt[0].itemName;
                this.pickForm.batchName = invt[0].batchName;
                // 实际拣货数量
                this.pickForm.actQuantity = invt[0].quantity;
                this.pickForm.newBoxCode = invt[0].boxCode;
              }
              this.overlay = false;
            }
          });
      }
    },
    /**
     * 扫描库位
     */
    handleEnterCellCode() {
      if (this.pickForm.changeBoxCode) {
        this.$root.api.api.toast({
          msg: "不按任务拣货时，仅支持扫描追踪号",
          location: "middle",
          duration: 5000,
        });
        this.pickForm.srcCellCode = "";
        document.getElementById("id-srcBarcode").focus();
        return false;
      }
      //拣货库位
      let srcCellCode = this.pickForm.srcCellCode;
      // 增加拣货库位与上面拣货任务列表比对
      let ok = 0;
      let count = 0;
      let data;
      this.recommendList.forEach((item) => {
        if (item.state != 2 && item.cellCode == srcCellCode) {
          // 表示扫描的库位和列表中对应上了
          ok = 1;
          count++;
          data = item;
        }
      });
      if (ok == 0) {
        this.pickForm.srcCellCode = "";
        this.pickForm.barcode = "";
        alert("请扫描正确的库位!");
        return false;
      }
      // 利用库位去查询库存如果只有一条就不用扫描物料条码直接带出信息
      if (count == 1) {
        this.getItemStock(data.itemCode);
        console.log(JSON.stringify(data));
        //获取拣货任务id
        this.pickForm.pickTaskId = data.pickTaskId;
        this.pickForm.itemCode = data.itemCode;
        this.pickForm.itemName = data.itemName;
        this.pickForm.batchName = data.batchName;
        // 实际拣货数量
        this.pickForm.actQuantity = data.pickQuantity - data.reviewQuantity;
        // 计划拣货数量
        this.pickForm.pickQuantity = this.pickForm.actQuantity;
        // 打开物料数量修改焦点 id-pickQty
        document.getElementById("id-pickQty").focus();
      } else {
        this.$root.api.api.toast({
          msg: "按库位无法定位到唯一库存，请扫描追踪号",
          location: "middle",
          duration: 5000,
        });
        this.pickForm.srcCellCode = "";
        this.pickForm.barcode = "";
      }
    },
    /**
     * 获取物料的库存总量
     */
    getItemStock(itemCode) {
      wms
        .get({
          url: "/inventorys/list/sumQty",
          data: { cellUseType: 2, itemCode: itemCode },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            this.pickForm.allQuantity = res.data.message;
          }
        });
    },

    /**
     * 提交返回
     */
    pickingReturn() {
      this.pickViewItem = {
        pickTaskId: "",
        itemCode: "", // 物料编码
        itemName: "", // 物料编码
        boxCode: "", // 推荐容器
        cellCode: "", // 所属库位
        pickQuantity: "", // 容器内数量
        pickQty: "", // 拣货数量
      };
      this.recommendList = [];
      this.currentWaveItem = {};
      this.$refs.pickingForm.reset();
      this.tab = 0;
      this.taskCodeSearch();
    },

    /**
     * 补打标签
     */
    reTag() {
      if (this.invList.length == 0) {
        return false;
      }

      let printModule = window.api.require("moduleDemo");
      let printParams = {
        mac: localStorage.getItem("uuid"),
      };

      let list = this.invList;
      console.log(JSON.stringify(this.invList));
      printModule.printConnect(printParams, function (ret) {
        for (let i = 0; i < list.length; i++) {
          printToJiaBo(
            list[i].itemCode,
            list[i].itemName,
            list[i].batchName,
            list[i].quantity,
            list[i].boxCode
          );
        }
      });
    },

    /**
     * 拣货提交
     */
    pickingSubmit() {
      let this_ = this;
      //校验提交的数量必须要等于推荐的数量
      if (!this.pickForm.actQuantity) {
        return false;
      }
      // if (this.pickForm.actQuantity != this.pickForm.pickQuantity && ) {
      //   return this.$root.api.api.toast({
      //     msg: "拣货数量不允许少于计划数量",
      //     location: "middle",
      //     duration: 5000,
      //   });
      // }
      if (this.pickForm.actQuantity > this.pickForm.pickQuantity) {
        if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
          window.api.confirm(
            {
              title: "提示",
              msg: "实际拣货数量不等于计划数量，是否继续?",
              buttons: ["确定", "取消"],
            },
            function (ret, err) {
              let index = ret.buttonIndex;
              if (index == 1) {
                this_.submitAjax();
              }
            }
          );
        } else {
          this_.submitAjax();
        }
      } else {
        this_.submitAjax();
      }
    },

    submitAjax() {
      let params = {
        pickTaskId: this.pickForm.pickTaskId,
        pickQuantity: this.pickForm.actQuantity,
        srcCellCode: this.pickForm.srcCellCode,
        toBoxCode: this.pickForm.toBoxCode,
        newBoxCode: this.pickForm.newBoxCode,
      };
      let url = "/pick/tasks/commitPick";
      if (this.pickForm.changeBoxCode) {
        url = "/pick/tasks/commitPickForChange";
      }
      this.overlay = true;
      wms
        .post({
          url: url,
          data: params,
        })
        .then((res) => {
          console.log(JSON.stringify(res));
          if (res.status == 200 && res.data.code == 200) {
            //打印
            if (res.data.data) {
              //新标签的数量
              this.invList = res.data.data;
              let invData = res.data.data;
              if (
                window.navigator.userAgent.toLowerCase().includes("apicloud")
              ) {
                // if (this.pickForm.actQuantity != this.pickForm.pickQuantity) {
                for (let i = 0; i < invData.length; i++) {
                  printToJiaBo(
                    invData[i].itemCode,
                    invData[i].itemName,
                    invData[i].batchName,
                    invData[i].quantity,
                    invData[i].boxCode
                  );
                }
                // }
              }
            }

            //提交成功
            Object.keys(this.pickForm).forEach(
              (key) => (this.pickForm[key] = "")
            );
            
            document.getElementById("id-srcBarcode").focus();
            this.overlay = false;
            // alert("拣货成功!!!");
            this.$root.api.api.toast({
              msg: "拣货成功!",
              location: "middle",
              duration: 5000,
            });
            // 如果拣货没有拣完 可以在当前页面继续拣
            this.picking();
          } else {
            this.overlay = false;
            alert(res.data.message);
          }
        });
    },

    // 原因详情提交
    msgDialog_card_submit() {
      // this.currentSoDetailItem.msg = this.msgData;
      this.msgDialog = false;
      // this.pickingReturn();
      // 将表单通过请求提交 this.currentSoDetailItem
    },
    // -----------------------拣货页面 E -------------------
  },
  watch: {},

  mounted() {
    let pageParam;
    // 获取出库类任务型
    wms
      .get({
        url: "/data/dict/details/findBydDataDictCode",
        data: { dataDictCode: "soBillType" },
      })
      .then((res) => {
        // console.log(JSON.stringify(res.data.data.list));  1111
        if (res.status == 200 && res.data.code == 200) {
          let retData = res.data.data.list;
          this.soBillTypeList.push("", "");
          for (let i = 0; i < retData.length; i++) {
            this.soBillTypeList.push(retData[i]);
          }
        } else {
          alert(res.data.message);
        }
      });

    // 页面参数
    if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
      pageParam = window.api.pageParam;
      this.outBillForm.billNo = pageParam.billNo;

      window.api.addEventListener(
        {
          name: "PickingByOrder_two",
        },
        (res) => {
          this.outBillForm.billNo = res.value.billNo;
          this.outBillForm.billId = res.value.billId;
          this.taskCodeSearch();
        }
      );
      // 浏览器
    } else {
      pageParam = this.$root.api.api.pageParam;
      this.outBillForm.billNo = pageParam.billNo;
      this.taskCodeSearch();
      this.$root.api.api.addEventListener(
        {
          name: "PickingByOrder_two",
        },
        (res) => {
          this.outBillForm.billNo = res.value.billNo;
          this.taskCodeSearch();
        }
      );
    }
  },
};
</script>


<style lang="scss" scoped>
.v-tabs {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: transparent;

  ::v-deep .v-tabs-items {
    flex: 1;
    background-color: transparent;

    .v-window__container {
      height: 100%;
    }
  }
}

.footer {
  position: absolute;
  padding-top: 20px;
  width: 100%;
  bottom: 0;
}

.footer1 {
  position: absolute;
  padding-top: 20px;
  width: 100%;
  bottom: 0;
}

.list_content {
  flex-direction: column;
  padding: 8px;
  min-height: 5rem;

  .col {
    padding: 2px;
    min-height: 1rem;
    text-align: right;
  }

  .row {
    margin: 0;
    background-color: transparent !important;
  }

  .card-lable {
    text-align: left;
  }

  .card-value {
    text-align: left;
  }
}

.task {
  overflow: auto;
  padding-bottom: 56px;

  &_from {
    background-color: #fff;
    margin-bottom: 6px;

    .v-text-field ::v-deep.v-input__prepend-inner {
      margin-top: 8px;
      display: flex;
      font-size: 0.875rem;
      min-width: 4rem;

      .v-input__append-inner .v-btn {
        padding: 0 10px;
        margin-bottom: 2px;

        .col {
          padding-bottom: 6px;
        }
      }
    }

    &_list .v-card__subtitle .row + .row {
      margin-top: 6px;
      justify-content: flex-end;
      padding-right: 10px;

      .col {
        padding: 6px 8px;
      }
    }
  }
}

.v-card__subtitle {
  display: flex;
  margin: 0;

  .row {
    margin: 0;
    background-color: #fff;

    .col {
      min-height: 1rem;
      padding: 8px;
    }

    .receiving_heard {
      border-top: 1px solid grey;
      font-size: 16px;
      font-weight: bold;
    }

    .row {
      background-color: inherit;
    }
  }
}

.v-card__text {
  padding: 0 10px !important;

  .row {
    margin: 0;
  }

  .col {
    padding: 8px;

    ::v-deep.v-input__prepend-outer {
      min-width: 2rem;
      margin-top: 10px;
    }
  }
}

.pickingCard {
  // background-color: skyblue;
  border-radius: 8px;
  box-shadow: 3px 3px 6px rgb(0 0 0 / 20%), 3px 3px 6px rgb(0 0 0 / 14%),
    3px 3px 6px rgb(0 0 0 / 12%) !important;

  .col {
    padding: 0;
  }

  .row {
    margin: 0;

    .col {
      height: 24px;
      font-size: 13px;
      line-height: 24px;
      color: #979899;
    }

    .pickingCard_title {
      font-size: 15px;
      font-weight: bold;
      color: #f8a73c;
    }
  }

  .v-input--selection-controls {
    margin-top: 8px;
  }

  // 10px 10px 5px #888888
}

.pickingCard-bottom {
  background-color: #fff;

  .col {
  }
}

.btn-left {
  background-color: #fff !important;

  ::v-deep.v-btn__content {
    color: #193690 !important;
  }
}

.pickingForm {
  .row {
    margin: 0;

    .col {
      padding-bottom: 0;
      padding-top: 8px;
    }
  }
  .pickingForm_view {
    margin-top: 4px;
    ::v-deep {
      .v-input {
        .v-label {
          font-size: 12px;
        }
        font-size: 12px;
      }
    }
    //.v-text-field--filled.v-input--dense.v-text-field--single-line > .v-input__control > .v-input__slot{
    //  min-height: 32px;
    //}
  }
}

// .pickingWrap {
//   padding-bottom: 66px;
//   overflow-y: auto; // 配置页面滚动
// }

::v-deep.navigationBtns .navigationBtns_return .v-btn__content {
  color: #193690;
}

::v-deep.v-bottom-navigation .v-btn__content {
  color: #fff;
  font-size: 1rem;
}

.inputPlaceholder ::v-deep.v-text-field__slot input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-moz-placeholder,
input:-ms-input-placeholder {
  font-size: 15px;
}

.boxCodeDialog_card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .boxCodeDialog_card_title {
    width: 100%;
    padding-top: 24px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffc352;
    color: #fff;
    // padding: 12px 24px 8px !important;
  }

  .v-card__text {
    margin-top: 12px;
    flex: 1;
  }

  .boxCodeDialog_card_table {
    ::v-deep .text-start {
      padding: 0 8px !important;
    }
  }

  .v-card__actions {
    width: 100%;
  }

  .msgDialog_card_title {
    padding: 12px 24px 10px !important;
  }
}

.pickingCard {
  //  修改卡片行高
  ::v-deep .v-data-table > .v-data-table__wrapper .v-data-table__mobile-row {
    min-height: 32px;
  }
}
</style>
